<template>
    <view class="wrapper">
        <!-- 收货信息 -->
        <view class="shipment">
            <block v-if="address">
                <view class="dt">收货人:</view>
                <view class="dd meta">
                    <text class="name">{{ address.userName }}</text>
                    <text class="phone">{{ address.telNumber }}</text>
                </view>
                <view class="dt">收货地址:</view>
                <view class="dd">{{ addr }}</view>
            </block>
            <!-- 获取用户地址 -->
            <button v-else @click="getAddress">获取收获地址</button>
        </view>
        <!-- 购物车 -->
        <view class="carts">
            <view class="item">
                <!-- 店铺名称 -->
                <view class="shopname">优购生活馆</view>
                <uni-swipe-action>
                    <uni-swipe-action-item
                        v-for="(item, index) in carts"
                        :key="item.goods_id"
                        :right-options="options"
                        @click="onClick($event, item)"
                    >
                        <view class="goods">
                            <!-- 商品图片 -->
                            <image
                                class="pic"
                                :src="item.goods_small_logo"
                            ></image>
                            <!-- 商品信息 -->
                            <view class="meta">
                                <view class="name">{{ item.goods_name }}</view>
                                <view class="price">
                                    <text>￥</text>{{ item.goods_price
                                    }}<text>.00</text>
                                </view>
                                <!-- 加减 -->
                                <view class="amount">
                                    <text
                                        class="reduce"
                                        @click="changeCount(index, -1)"
                                    >
                                        -
                                    </text>
                                    <input
                                        type="number"
                                        :value="item.goods_count"
                                        class="number"
                                    />
                                    <text
                                        class="plus"
                                        @click="changeCount(index, 1)"
                                    >
                                        +
                                    </text>
                                </view>
                            </view>
                            <!-- 选框 -->
                            <view class="checkbox">
                                <icon
                                    @tap="selPrd(index)"
                                    :color="
                                        item.goods_checked ? '#ea4451' : '#ccc'
                                    "
                                    type="success"
                                    size="20"
                                ></icon>
                            </view>
                        </view>
                    </uni-swipe-action-item>
                </uni-swipe-action>
            </view>
        </view>
        <!-- 其它 -->
        <view class="extra">
            <label @click="selAll" class="checkall">
                <icon
                    type="success"
                    :color="isAll ? '#ea4451' : '#ccc'"
                    size="20"
                ></icon>
                全选
            </label>
            <view class="total">
                合计:
                <text>￥</text>
                <label> {{ amount }} </label>
                <text>.00</text>
            </view>
            <view class="pay" @click="createOrder">结算</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 购物车数据
            carts: [],

            // 删除按钮
            options: [
                {
                    text: "删除",
                    style: {
                        backgroundColor: "#dd524d",
                    },
                },
            ],

            // 收货地址
            address: null,
        };
    },

    computed: {
        // 是否全部选中
        isAll() {
            return this.checkedPrd.length === this.carts.length;
        },

        // 选中的数据
        checkedPrd() {
            return this.carts.filter((item) => item.goods_checked);
        },

        // 总金额
        amount() {
            let total = 0;
            this.checkedPrd.forEach(
                (item) => (total += item.goods_price * item.goods_count)
            );
            return total;
        },

        addr() {
            return (
                this.address &&
                this.address.provinceName +
                    this.address.cityName +
                    this.address.countyName +
                    this.address.detailInfo
            );
        },
    },

    methods: {
        // 获取购物车列表
        getCarts() {
            this.carts = uni.getStorageSync("carts") || [];
            console.log(this.carts);
        },

        //加减
        changeCount(index, step) {
            let count = this.carts[index].goods_count;

            if (step === 1 && count === 3) return;
            if (step === -1 && count === 1) return;

            this.carts[index].goods_count += step;
            uni.setStorageSync("carts", this.carts);
        },

        // 更新本地数据
        updateStorage() {
            uni.setStorageSync("carts", this.carts);
        },

        // 单选
        selPrd(index) {
            this.carts[index].goods_checked = !this.carts[index].goods_checked;
            this.updateStorage();
        },

        // 全选
        selAll() {
            // 根据计算属性是否全部选中，做取反
            if (this.isAll) {
                this.carts.forEach((item) => (item.goods_checked = false));
            } else {
                this.carts.forEach((item) => (item.goods_checked = true));
            }
            this.updateStorage();
        },

        // 删除
        onClick(e, good) {
            uni.showModal({
                title: "提示",
                content: `确认删除: ${good.goods_name}吗？`,
                showCancel: true,
                cancelText: "取消",
                cancelColor: "#000000",
                confirmText: "确定",
                confirmColor: "#3CC51F",
                success: (result) => {
                    if (result.confirm) {
                        this.carts = this.carts.filter(
                            (item) => item.goods_id !== good.goods_id
                        );
                        this.updateStorage();
                    }
                },
            });
        },

        // 获取收货地址
        getAddress() {
            uni.chooseAddress({
                success: (res) => {
                    this.address = res;
                },
            });
        },

        // 结算-创建订单
        // 创建订单
        async createOrder() {
            // 有收货地址和选中至少一件商品
            if (!this.address || !this.checkedPrd.length) {
                return uni.showToast({
                    title: "请填写收货地址和添加商品！",
                    icon: "none",
                });
            }
            // 是否登录
            if (!uni.getStorageSync("token")) {
                // 跳转登录页
                return uni.navigateTo({
                    url: "/packone/auth/index",
                });
            }

            // 调用接口：创建订单
            let { meta: msg, message: data } = await this.request({
                url: "/api/public/v1/my/orders/create",
                method: "post",
                data: {
                    order_price: this.amount,
                    consignee_addr: this.addr,
                    goods: this.checkedPrd.map((item) => {
                        item.goods_number = item.goods_count;
                        return item;
                    }),
                },
            });
            if (msg.status === 200) {
                // 订单成功创建
                // 1. 获取购物车中剩余的商品
                let residuePrds = this.carts.filter(
                    (item) => !item.goods_checked
                );
                // 更新本地
                uni.setStorageSync("carts", residuePrds);
                // 2. 跳转到订单页面
                uni.navigateTo({
                    url: "/packone/order/index",
                });
            } else {
                uni.showToast({
                    icon: "none",
                    title: msg.msg,
                });
            }
        },
    },

    onShow() {
        this.getCarts();
    },
};
</script>

<style scoped lang="less">
.shipment {
    height: 100rpx;
    line-height: 2;
    padding: 30rpx 30rpx 40rpx 30rpx;
    font-size: 27rpx;
    color: #333;
    background-color: #fff;
    background-image: url(http://static.botue.com/ugo/images/cart_border%402x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;

    .dt {
        width: 140rpx;
        float: left;
        clear: both;
    }

    .dd {
        padding-left: 160rpx;
    }

    .meta {
        padding-right: 50rpx;
    }

    text.phone {
        float: right;
    }
}

.carts {
    background-color: #f4f4f4;
    padding-bottom: 110rpx;
    overflow: hidden;

    .shopname {
        padding: 30rpx;
        margin-top: 20rpx;
        font-size: 30rpx;
        color: #333;
        background-color: #fff;
        border-top: 1rpx solid #eee;
        border-bottom: 1rpx solid #eee;
    }

    .goods {
        display: flex;
        padding: 30rpx 20rpx 30rpx 0;
        margin-left: 100rpx;
        border-bottom: 1rpx solid #eee;
        background-color: #fff;

        position: relative;

        .checkbox {
            width: 101rpx;
            height: 100%;
            background-color: #fff;

            display: flex;
            justify-content: center;
            align-items: center;

            position: absolute;
            left: -100rpx;
            top: 0;
        }

        &:last-child {
            border-bottom: none;
        }

        .pic {
            width: 200rpx;
            height: 200rpx;
            margin-right: 30rpx;
        }

        .meta {
            flex: 1;
            font-size: 27rpx;
            color: #333;
            position: relative;
        }

        .name {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .price {
            position: absolute;
            bottom: 0;

            color: #ea4451;
            font-size: 33rpx;

            text {
                font-size: 22rpx;
            }
        }

        .amount {
            position: absolute;
            bottom: 0;
            right: 20rpx;

            height: 48rpx;
            text-align: center;
            border: 1rpx solid #ddd;
            border-radius: 8rpx;

            display: flex;
            align-items: center;

            text {
                display: block;
                width: 60rpx;
                line-height: 48rpx;
                font-size: 36rpx;
                color: #ddd;
                text-align: center;
            }

            input {
                width: 60rpx;
                height: 48rpx;
                min-height: 48rpx;
                font-size: 27rpx;
                border-left: 1rpx solid #ddd;
                border-right: 1rpx solid #ddd;
            }
        }
    }
}

.extra {
    position: fixed;
    bottom: 0;
    /* #ifdef H5 */
    bottom: 50px;
    /* #endif */
    left: 0;
    z-index: 9;

    width: 750rpx;
    height: 96rpx;
    text-align: center;
    line-height: 96rpx;
    font-size: 36rpx;
    border-top: 1rpx solid #eee;
    background-color: #fff;
    color: #333;
    display: flex;

    .checkall {
        width: 140rpx;
        line-height: 1;
        margin-left: 25rpx;
        display: flex;
        align-items: center;

        icon {
            margin-right: 20rpx;
        }
    }

    .total {
        display: flex;
        justify-content: center;
        flex: 1;

        label,
        text {
            color: #ea4451;
            vertical-align: bottom;
            position: relative;
            bottom: -2rpx;
        }

        text {
            position: relative;
            bottom: -3rpx;
            font-size: 24rpx;

            &:first-child {
                margin-left: 10rpx;
            }
        }
    }

    .pay {
        width: 200rpx;
        background-color: #ea4451;
        color: #fff;
    }
}
</style>
